<template>
	<scroll-view scroll-y="true" style="height: 100%;width: 99%;" @scrolltolower="lower">
		<view style="">
			<view class="cItem" v-for="item in data" :key="item.Id">
				<view class="customer">
					{{item.CustomerName}}
				</view>
				<view class="line" style="font-weight: bold;">
					<view class="cell left">
						<view class="lable">欠款余额</view>
					</view>
					<view class="cell right">
						￥{{momenyFormat(item.ArrearsMoney)}}
					</view>
				</view>
				<view style="font-weight: normal;">
					单号：{{getReplaceId(item.Receiptnumber)}} 
				</view>
				<view class="line">
					<view class="cell left">
						<view class="lable font">最近收款</view>
					</view>
					<view class="cell right font" style="">
						<text style="flex: 5;">￥{{momenyFormat(item.RecentPyments)}}</text>
						<text style="flex: 5;">{{item.RecentDate?item.RecentDate.substring(0,10):''}}</text>
					</view>
				</view>

				<view class="line">
					<view class="cell left">
						<view class="lable font">累计收款</view>
					</view>
					<view class="cell right font" style="">
						<text style="flex: 5;">￥{{momenyFormat(item.CollectionSum)}}</text>
					</view>
				</view>
				<view class="line flexRight">
					<image  @click="toList('收款记录',item)" src="/static/stateIcon/shouk.png" mode=""></image>
					<image  @click="toSettlement(item)" src="/static/stateIcon/xiaoz.png" mode=""></image>
					<!-- <text @click="toList('收款记录',item)">收款记录</text>
					<text @click="toSettlement(item)">销账收款</text> -->
				</view>
			</view>
		</view>
		<!-- 上拉显示更多 -->
		<view class="" style="padding-bottom: 60rpx;">
			<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
		</view>
	</scroll-view>
</template>

<script>
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		momenyFormat
	} from '@/util/util.js'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0,
				keyword: '11',
				data: [],
				headerData: {}
			}
		},
		onLoad() {
			// this.getHeaderData()
			// this.getDataList()
		},
		onShow() {
			this.getHeaderData()
			this.getDataList()
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/user/user'
			})
		},
		methods: {
			// 字符串空格处理
			getReplaceId(data){
				if(data){
					return "S"+data.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")
				}
			},
			// 去收款
			toSettlement(data) {
				uni.navigateTo({
					url: '/pages/CollectMoney/Settlement?data=' + JSON.stringify(data)
				})
			},
			toList(key, item) {
				uni.navigateTo({
					url: `/pages/CollectMoney/List?key=${key}&data=${JSON.stringify(item)}`
				})
			},
			// 触底
			lower() {
				if (this.data.length >= this.total) {
					this.status = "noMore"
					return
				}
				this.status = "loading"
				uni.showLoading()
				this.pagination.PageIndex++
				this.$http('post', '/BO/BIlling/GetBillCollectionMoneyList', {
					...this.pagination,
					Search: {
						CompanyId: uni.getStorageSync('CompanyInfo').Id,
						CustomerName: this.keyword
					}
				}).then(res => {
					uni.hideLoading()
					if (!res.Success) {
						this.status = "noMore"
						this.contentText.contentnomore = "今日未开单"
						this.$api.msg(res.Msg)
						return
					}
					this.data = this.data.concat(res.Data)
					this.total = res.Total
					if (this.pagination.PageIndex * this.pagination.PageRows > this.total) {
						this.status = "noMore"
						this.contentText.contentnomore = "没有更多了"
						return
					}
				})
			},
			getHeaderData() {
				this.$http('post', '/BO/BIlling/GetDateCollectionData?CompanyId=' + uni.getStorageSync('CompanyInfo')
					.Id).then(res => {
					console.log(res);
					if (!res.Success) return this.$api.msg(res.Msg)
					this.headerData = res.Data
				})
			},
			getDataList() {
				this.status = "loading"
				this.$http('post', '/BO/BIlling/GetBillCollectionMoneyList', {
					...this.pagination,
					Search: {
						CompanyId: uni.getStorageSync('CompanyInfo').Id,
						CustomerName: this.keyword
					}
				}).then(res => {
					console.log('获取父组件调用的销账列表数据', res.Data)
					if (!res.Success) {
						this.status = "noMore"
						this.$api.msg(res.Msg)
						this.contentText.contentnomore = "今日未开单"
						return
					}
					this.data = res.Data
					this.total = res.Total
					if (this.pagination.PageIndex * this.pagination.PageRows > this.total) {
						this.status = "noMore"
						this.contentText.contentnomore = "没有更多了"
						return
					}
				})
			},
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.CollectMoney {
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;

		.moneyT {
			background-color: #ffffff7d;
			display: flex;
			justify-content: space-around;
			padding: 10px;
			padding-top: 18px;

			.tItem {
				width: 40%;
				background-color: #2ba7e9b3;
				color: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;
				text-align: center;

				.title {
					line-height: 2;
					border-bottom: 1px solid #eee;
				}

				.content {
					font-weight: bold;
					line-height: 2;
					font-size: 34rpx;
				}
			}
		}

		.container {
			padding: 10px;
			padding-bottom: 0;
			/* #ifdef H5 */
			height: calc(100vh - 250px);
			/* #endif */

			/* #ifdef APP */
			height: calc(100vh - 160px);

			/* #endif */
			.cItem {
				background-color: #fff;
				border-radius: 10px;
				box-sizing: border-box;
				font-weight: 600;
				padding: 10rpx;
				padding-bottom: 5rpx;
				margin-bottom: 10rpx;

				.customer {
					margin-bottom: 20rpx;
				}

				.bottomLine {
					// border-bottom: 1px solid #ccc;
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
				}

				.line.select {
					margin-top: 15rpx;
					display: flex;
					align-items: center;
				}

				.line {
					display: flex;

					// height: 60rpx;
					// align-items: self-end;
					.font {
						font-weight: normal;
						font-size: 28rpx;
					}

					.cell.left {
						flex: 4;
					}

					.cell.right {
						flex: 6;
					}

					.cell {

						// flex: 1;
						display: flex;
						justify-content: space-between;
						margin-right: 20rpx;

						.lable {
							// width: 60px;
						}

						text {
							// flex: 1;
							// color: blue;
						}
					}
				}

				.flexLeft {
					display: flex;
					align-items: center;
					flex: 3;
				}

				.line.flexRight {
					margin-top: 10rpx;
				}

				.flexRight {
					flex: 7;
					display: flex;
					justify-content: flex-end;
					color: #2979ff;
					font-weight: normal;

					image {
						width: 140rpx;
						height: 46rpx;
						margin-left: 10px;
					}

					text {
						border-bottom: 1px solid #2979ff;
						margin-left: 60rpx;
					}
				}
			}
		}
	}
</style>